<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <div class="lg:w-2/12 w-full h-full p-2 shadow">
      <ma-tree-slider
        v-model="folderData"
        searchPlaceholder="搜索文件夹"
        :field-names="{ title: 'name', key: 'id' }"
        :selectedKeys="defaultKeys"
        @click="switchFolder"
      />
    </div>

    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="options" :columns="columns" ref="crudRef">
        <template #operationBeforeExtend="{ record }">
          <a-link @click="openFileList(record)"> 任务文件</a-link>
        </template>
      </ma-crud>

      <file ref="fileRef" />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import lzccTask from '@/api/lzcc/lzccTask'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import { request } from '@/utils/request'
import File from './file.vue'

const crudRef = ref()
const fileRef = ref()
const taskType = ref(1)
const defaultKeys = ref([])
const folderData = ref([])

const openFileList = (row) => {
  fileRef.value.open(row)
}

const switchStatus = (statusValue, id, statusName) => {
  lzccTask.changeStatus({ id, statusName, statusValue }).then( res => {
    res.success && Message.success(res.message)
  }).catch( e => { console.log(e) } )
}

const switchFolder = (v, request = true) => {
  defaultKeys.value = v
  request && crudRef.value.refresh()
}

const options = reactive({
  id: 'flyos_lzcc_task',
  isDbClickEdit: false,
  autoRequest: false,
  searchColNumber: 6,
  rowSelection: undefined,
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  beforeRequest: (params) => {
    params.folder_id = defaultKeys.value[0]
  },
  api: lzccTask.getList,
  // add: {
  //   show: true,
  //   api: lzccTask.save,
  //   auth: ['lzcc:task:save']
  // },
  edit: {
    show: false,
    api: lzccTask.update,
    auth: ['lzcc:task:update'],
  },
  delete: {
    show: true,
    api: lzccTask.deletes,
    auth: ['lzcc:task:delete'],
    batch: false,
    disabled: (row) => {
      return row.status == 1
    }
  },
  tabs: {
    type: 'card-gutter',
    data: [
      { label: '集装箱任务', value: '1' },
      { label: '车号任务', value: '2' }
    ],
    searchKey: 'task_type',
    onChange: async (value) => {
      taskType.value = value
      if (value == '1') {
        columns[1].hide = true
      } else {
        columns[1].hide = false
      }

      const res = await request({
        url: 'lzcc/taskFolder/remote',
        method: 'post',
        data: {
          select: [ 'id', 'name' ],
          filter: {
            type: [ '=', value ],
          },
        }
      })

      if (res && res.success) {
        folderData.value = res.data
        switchFolder(res.data.length > 0 ? [ res.data[0].id ] : [], false)
      }
    }
  }
})

const columns = reactive([
  {
    title: "ID",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false
  },
  {
    title: "车号",
    dataIndex: "car_num",
    formType: "input"
  },
  {
    title: "箱号",
    dataIndex: "container_no",
    formType: "input",
    search: true,
    commonRules: {
      required: true,
      message: "请输入箱号"
    }
  },
  {
    title: "箱型",
    dataIndex: "mbl_type",
    formType: "select",
    dict: {
      name: "mbl_type",
      props: {
        label: "title",
        value: "key"
      },
      translation: true
    },
    search: true,
    commonRules: {
      required: true,
      message: "请输入箱型"
    }
  },
  {
    title: "专用线",
    dataIndex: "zjauditBy",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "铁路",
    dataIndex: "audit_by",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "审核时间",
    dataIndex: "audit_time",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
  {
    title: "审核状态",
    dataIndex: "status",
    formType: "select",
    search: true,
    addDisplay: false,
    editDisplay: false,
    dict: {
      name: "audit_status",
      props: {
        label: "title",
        value: "key"
      },
      translation: true,
      tagColors: { '2': 'blue', '3': 'red', '4':'green', '5':'magenta'}
    }
  },
  {
    title: "备注",
    dataIndex: "remark",
    formType: "textarea"
  },
  {
    title: "提交时间",
    dataIndex: "commit_time",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: false
  },
  {
    title: "删除状态",
    dataIndex: "del_flag",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "任务归属日期",
    dataIndex: "task_date",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    showTime: false
  },
  {
    title: "顺位号",
    dataIndex: "sort",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
  {
    title: "车种",
    dataIndex: "car_type",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true
  },
])

onMounted(() => {
  crudRef.value.requestData()
})
</script>
<script> export default { name: 'lzcc:task' } </script>